<template>
    <ul class="m-menuTab">
        <li v-for="(item,index) in menuTab" :key="index"
        :class="{'active':idx==index}"
        @click="setMenu(index)">
            <img :src="item.icon" alt="">
            <p>{{item.text}}</p>
        </li>
    </ul>
</template>
<script>
export default {
    name:'',
    props:['menuTab'],
    data () {
        return {
            idx:0,
        }
    },
    methods:{
        setMenu(index) {
            this.idx = index;
            this.$emit('setMenu',index);
        }
    }
}
</script>
<style lang="less" scoped>
.m-menuTab{
    .flex;
    padding: .6rem 0;
    background: white;
    li{
        flex:1;
        text-align: center;
        img{
            width: 2rem;
            height: 2rem;
        }
        &.active{
            color: @primary-red;
        }
    }
}
</style>
